<template>
  <a-card :bodyStyle="{ padding: 0, height: '100%' }" :bordered="false">
    <div class="menu-sidebar">
      <div class="logo flex flex-s">
        <img :src="logoPng" width="20" />
      </div>
      <div class="flex flex-col">
        <template v-if="!isFullscreen">
          <a-tooltip title="全屏" placement="right" @click="enter">
            <div class="system__icon">
              <FullscreenOutlined />
            </div>
          </a-tooltip>
        </template>
        <template v-else>
          <a-tooltip title="退出全屏" placement="right" @click="exit">
            <div class="system__icon">
              <FullscreenExitOutlined />
            </div>
          </a-tooltip>
        </template>
        <a-tooltip title="关闭网页" placement="right">
          <div class="system__icon" @click="closePage">
            <PoweroffOutlined />
          </div>
        </a-tooltip>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import logoPng from '@/assets/logo.png';
import {
  FullscreenExitOutlined,
  FullscreenOutlined,
  type PoweroffOutlined,
} from '@ant-design/icons-vue';
import { useFullscreen } from '@vueuse/core';
import { Modal } from 'ant-design-vue';

const { enter, isFullscreen, exit } = useFullscreen();
const closePage = () => {
  Modal.confirm({
    title: '警告',
    content: '是否关闭网页',
    centered: true,
    onOk() {
      window.close();
    },
  });
};
</script>

<style lang="scss" scoped>
.menu-sidebar {
  width: 43px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--border-color);

  .logo {
    width: 100%;
    height: 48px;
  }
  .system__icon {
    height: 42px;
  }
}
</style>
